<template>
  <quill-editor
    :options="editorOptions"
    
    :blur="_blur"
    :focus="_focus"
    :ready="_ready"

    ref="richtext"
    v-model="val"
  ></quill-editor>
</template>

<script>

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor, Quill } from 'vue-quill-editor'
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)

// 在组件中引用url可能不妥
import {UPLOAD} from '../../api/url'
import { Message, MessageBox, Notification } from 'element-ui';


export default {
  components: { quillEditor },
  props: {
    options: {
      default: Object,
      required: true
    },
    value: {
      required: true
    }
  },
  computed: {
    val: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
    },
	  editorOptions(){
    	return {
			...this.options,
			modules:{
				ImageExtend: {  // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
					name: 'file',  // 图片参数名
					size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
					action: UPLOAD,  // 服务器地址, 如果action为空，则采用base64插入图片
					// response 为一个函数用来获取服务器返回的具体图片地址
					// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
					// 则 return res.data.url
					response: (res) => {
						return res.data.url;
					},
					headers: (xhr) => {
						// xhr.withCredentials = true;
						// xhr.setRequestHeader('myHeader','myValue')
					},  // 可选参数 设置请求头部
					sizeError: () => {	// 图片超过大小的回调
						Message({message: "图片不能大于3M", type: 'warning'})
					},
					start: () => {},  // 可选参数 自定义开始上传触发事件
					end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
					error: () => {},  // 可选参数 上传失败触发的事件
					success: () => {},  // 可选参数  上传成功触发的事件
					change: (xhr, formData) => {
						// xhr.setRequestHeader('myHeader','myValue')
						// formData.append('token', 'myToken')
					} // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
				},
				toolbar: {  // 如果不上传图片到服务器，此处不必配置
					container: container,  // container为工具栏，此次引入了全部工具栏，也可自行配置
					handlers: {
						'image': function () {  // 劫持原来的图片点击按钮事件
							QuillWatch.emit(this.quill.id)
						}
					}
				}
			}
		}
	  }
  },
  methods: {
    _blur (editor) {
      this.$emit('blur', editor)
		this.options['@blur']&& this.options['@blur'](editor);
    },
    _focus (editor) {
      this.$emit('focus', editor)
		this.options['@focus'] && this.options['@focus'](editor)
    },
    _ready (editor) {
      this.$emit('ready', editor)
		this.options['@ready'] && this.options['@ready'](editor);
    }
  }
}
</script>

<style>
  .quill-editor {
    line-height: initial;
  }
</style>
